import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [{
        path: "/",
        name: "Home",
        component: Home,
    },
    {
        path: "/music",
        name: "music",
        meta: {
            keepAlive: true,
        },
        component: () =>
            import ("../views/Music/index.vue"),
    },
    {
        path: "/some",
        name: "some",
        component: () =>
            import ("../views/some.vue"),
    },
    {
        path: "/slot",
        name: "slot",
        component: () =>
            import ("../views/myslot/index.vue"),
    },
    {
        path: "/every",
        name: "every",
        component: () =>
            import ("../views/every/every.vue"),
    },
    {
        path: "/option",
        name: "option",
        component: () =>
            import ("../views/$option/index.vue"),
    },
    {
        path: "/vuex",
        name: "vuex",
        component: () =>
            import ("../views/myvuex/index.vue"),
        children: [{
                path: "vxone",
                name: "vxone",
                component: () =>
                    import ("../views/myvuex/vuexOne.vue"),
            },
            {
                path: "vxtwo",
                name: "vxtwo",
                component: () =>
                    import ("../views/myvuex/vuexTwo.vue"),
            },
        ],
    },
    {
        path: "/xiu",
        name: "xiu",
        meta: {
            keepAlive: true,
        },
        component: () =>
            import ("../views/xiu.vue"),
    },
    {
        path: "/about",
        name: "About",
        alias: "myabout", //路由别名
        beforeEnter: (to, from, next) => {
            //路由独享钩子函数
            next();
        },
        component: () =>
            import ("../views/About.vue"),
    },
    {
        path: "/fu",
        name: "fu",
        meta: {
            keepAlive: true, //需要缓存
            login: true,
        },
        component: () =>
            import ("../views/Fu.vue"),
    },
    {
        path: "/cate",
        name: "cate",
        // 路由的按需加载  解决 webapp 首屏加载过慢
        component: () =>
            import ("../views/Cate.vue"),
        children: [{
                path: "cateone",
                name: "cateone",
                component: () =>
                    import ("../views/CateOne.vue"),
            },
            {
                path: "catetwo",
                name: "catetwo",
                component: () =>
                    import ("../views/CateTwo.vue"),
            },
            {
                //:ccid 必传参数  后加？ 可忽略参数
                path: "catethree/:ccid?",
                name: "catethree",
                component: () =>
                    import ("../views/CateThree.vue"),
            },
        ],
    },
];

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes,
});

export default router;